<template>
  <div>
    <!-- 筛选 -->
    <cv-filter :filter-data="filterData" @query="initData" @reset="initData">
      <cv-filter-item
        label="姓名"
        :prop="(getTypeKey <A>) ('name')"
        :input="{ type: 'txt' }"
      ></cv-filter-item>

      <cv-filter-item
        label="姓名"
        :prop="(getTypeKey <A>) ('name')"
        :input="{ type: 'txt' }"
      ></cv-filter-item>

      <cv-filter-item
        label="性别"
        :prop="(getTypeKey <A>) ('address1')"
        :select="{
          data: [
            {
              id: 1,
              name: '男',
            },
          ],
        }"
      ></cv-filter-item>
    </cv-filter>

    <!-- 表格 -->
    <cv-table
      :data="pageConfig.list"
      :pagination="pageConfig"
      :height="'300px'"
      :loading="loading"
      @page-and-size-change="initData"
      @add-data="add.open"
      @refresh="initData"
    >
      <cv-table-col
        label="时间"
        :prop="(getTypeKey <A>) ('date')"
      ></cv-table-col>

      <cv-table-col
        label="头像"
        :prop="(getTypeKey <A>) ('avatar')"
        :img="{
          borderRadius: 5,
          srcList: ['https://s1.ax1x.com/2022/07/05/jtMjGq.jpg'],
        }"
      ></cv-table-col>

      <cv-table-col
        label="姓名"
        :prop="(getTypeKey <A>) ('name')"
      ></cv-table-col>

      <cv-table-col
        label="地址"
        :prop="(getTypeKey <A>) ('address1')"
      ></cv-table-col>

      <cv-table-col
        label="地址1"
        :prop="(getTypeKey <A>) ('address1')"
        :format="{
          callback: (e:string) => {
            return e
          },
        }"
      ></cv-table-col>

      <cv-table-col
        label="状态"
        :prop="(getTypeKey <A>) ('state')"
        :tag="{
          context: { 0: ['禁用', 'danger'], 1: ['启用', 'success'] },
        }"
      ></cv-table-col>

      <cv-table-action
        label="操作"
        :buttons="{ look: { show: false, permission: null } }"
      ></cv-table-action>
    </cv-table>

    <!-- 表单弹出框 -->
    <cv-dialog-form v-model="add.dialog.dialogVisible" @confirm="saveData">
      <cv-form-item
        label="姓名"
        :prop="(getTypeKey<A>)('name')"
        :input="{
          type: 'text',
        }"
      ></cv-form-item>
    </cv-dialog-form>
  </div>
</template>

<script lang="ts" setup>
import { useDialog } from '@/hooks/useDialog'
import { useTable } from '@/hooks/useTable'
import { getTypeKey } from '@/utils/common'
import { codeEnum } from '@/enums/codeEnum'

interface A {
  date: string
  avatar: string | string[]
  name: string
  state: number
  address1: string
  address2: string
  address3: string
  address4: string
  address5: string
  address6: string
}

const tableData: A[] = [
  {
    date: '2016-05-03',
    avatar: [
      'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
      'https://s1.ax1x.com/2022/07/05/jtMjGq.jpg',
    ],
    name: 'Tom',
    state: 0,
    address1: 'No. 189, Grove St, Los Angeles',
    address2: 'No. 189, Grove St, Los Angeles',
    address3: 'No. 189, Grove St, Los Angeles',
    address4: 'No. 189, Grove St, Los Angeles',
    address5: 'No. 189, Grove St, Los Angeles',
    address6: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    avatar:
      'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    name: 'Tom',
    state: 1,
    address1: 'No. 189, Grove St, Los Angeles',
    address2: 'No. 189, Grove St, Los Angeles',
    address3: 'No. 189, Grove St, Los Angeles',
    address4: 'No. 189, Grove St, Los Angeles',
    address5: 'No. 189, Grove St, Los Angeles',
    address6: 'No. 189, Grove St, Los Angeles',
  },
]

/**
 * 过滤数据参数
 */
const filterData = reactive({
  name: '',
  gender: 1,
})

/**
 * 表格加载hook
 */
const { pageConfig, loading, openLoading, byCodeCloseLoading } = useTable<A>()

/**
 * 请求列表数据
 */
const initData = () => {
  //开启加载动画
  openLoading()
  //模拟请求
  setTimeout(() => {
    //关闭加载动画
    byCodeCloseLoading(
      { code: codeEnum.OK },
      () => {
        pageConfig.total = 100
        pageConfig.list = tableData
        console.log('请求成功')
      },
      () => {
        console.log('请求失败')
      }
    )
  }, 500)
}
initData()

/**
 * 添加数据hook
 */
const add = useDialog()

//保存数据
const saveData = (data: any) => {
  console.log(data)
  console.log('111111')
}
</script>

<style lang="scss" scoped></style>
